<template>
  <div class="app-container">
    <el-card>
      <!-- 头部搜素start -->
      <el-form
        :model="query"
        ref="queryForm"
        v-show="showSearch"
        :inline="true"
      >
        <el-form-item label="服务标识">
          <common-input
            v-model="query.appname"
            placeholder="请输入"
            clearable

          />
        </el-form-item>

        <el-form-item label="服务名称">
          <common-input
            v-model="query.title"
            placeholder="请输入"
            clearable

          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >查询
          </el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 头部搜素end -->

      <!-- 按钮组织start -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            plain
            type="primary"
            icon="el-icon-plus"
            @click="edit(null)"
            hasPermi
          >新增
          </el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            type="danger"
            icon="el-icon-delete"
            :disabled="multiple"
            @click="del(selectionIds, true)"
            hasPermi
          >批量删除
          </el-button>
        </el-col>
      </el-row>
      <!-- 按钮组织end -->

      <!--列表 start-->
      <common-table
        v-loading="loading"
        :data="list"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>

        <!-- <el-table-column label="ID" align="left" prop="id">
          <template slot-scope="{row}">{{ row.id }}</template>
        </el-table-column> -->

        <el-table-column label="服务标识" align="left" prop="appname">
          <template slot-scope="{ row }">{{ row.appname }}</template>
        </el-table-column>

        <el-table-column label="服务名称" align="left" prop="title">
          <template slot-scope="{ row }">{{ row.title }}</template>
        </el-table-column>

        <el-table-column
          label="活跃机器地址"
          align="left"
          prop="addressList"

        >
          <template slot-scope="{ row }">{{ row.addressList }}</template>
        </el-table-column>

        <el-table-column
          label="已注册服务器地址"
          align="left"
          prop="registryList"

        >
          <template slot-scope="{ row }">{{ row.registryList }}</template>
        </el-table-column>

        <el-table-column
          label="状态更新时间"
          align="left"
          prop="updateTime"

        >
          <template slot-scope="{ row }">
            {{ row.updateTime ? utils.resolvingDate(row.updateTime) : "-" }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="160">
          <template
            slot-scope="{ row }"
            v-if="!row.addressList && !row.registryList"
          >
            <el-button type="text" @click="edit(row)" hasPermi>编辑</el-button>
            <el-button type="text" @click="del([row.id])" hasPermi
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </common-table>

      <pagination
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 列表 end -->
    <editDialog ref="editDialog" @refresh="getList"/>
  </div>
</template>

<script>
  import editDialog from "./components/editDialog";
  import {executor_list, executor_remove} from "@/api/taskcenter/all.js";

  export default {
    components: {editDialog},
    props: {},
    data() {
      return {
        showSearch: true, // 查询部分显示
        total: 1, // 总条数
        loading: false, // table 加载中
        list: [{a: 1}], // 数据列
        selectionIds: [], // 列表选中数据id
        selectionArr: [],
        single: true, // 非单个禁用
        multiple: true, // 非多个禁用
        query: {
          pageNum: 1,
          pageSize: 10,
        }, // 查询条件
      };
    },
    watch: {},
    computed: {},
    methods: {
      /**
       * 选择
       */
      handleSelectionChange(selection) {
        this.selectionArr = selection;
        this.selectionIds = selection.map((item) => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /**
       * 获取列表
       */
      getList() {
        let query = {...this.query};
        this.loading = true;
        executor_list(query).then((res) => {
          this.list = res.rows.reduce((r, c) => {
            let registryList = (c.registryList && c.registryList instanceof Array) ? c.registryList.join(',') : '';
            r.push({
              ...c,
              registryList
            });
            return r;
          }, []);
          this.total = res.total;
          this.loading = false;
        });
      },
      /**
       * 查询
       */
      handleQuery() {
        this.query.pageNum = 1;
        this.getList();
      },
      /**
       * 重置查询
       */
      resetQuery() {
        this.query = this.$options.data().query;
      },
      /**
       * 添加/编辑
       */
      edit(row) {
        this.$refs.editDialog.show(row ? {...row} : {});
      },
      /**
       * 删除
       */
      del(ids, flag) {
        this.$confirm("是否确认删除数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let isDelete = false;
            if (flag) {
              // 批量删除
              this.selectionArr.map((v) => {
                if (v.addressList || v.registryList) {
                  isDelete = true;
                }
              });
            }
            if (isDelete) {
              this.$GlobalErrorConfirm('删除失败','当前选择中有执行器正在使用，不可删除')
              return;
            }
            executor_remove({ids: ids.join(",")}).then((res) => {
              this.getList();
              this.$GlobalSuccessMessage('删除成功')
              this.selectionArr = [];
            });
          })
      },
    },
    created() {
      this.getList();
    },
    mounted() {
    },
  };
</script>
<style lang="scss" scoped>
</style>
